<%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="/jsp/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jqGird</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctxStatic}/plugins/h+/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/animate.min.css" rel="stylesheet">
    <%--<link href="${ctxStatic}/plugins/h+/css/style.min862f.css?v=4.1.0" rel="stylesheet">--%>
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/plugins/h+/css/plugins/webuploader/webuploader.css">
    <link href="${ctxStatic}/plugins/h+/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

    <link href="${ctxStatic}/plugins/h+/css/font-awesome.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/plugins/colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/plugins/cropper/cropper.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/plugins/switchery/switchery.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/plugins/jasny/jasny-bootstrap.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/plugins/nouslider/jquery.nouislider.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/plugins/ionRangeSlider/ion.rangeSlider.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/plugins/ionRangeSlider/ion.rangeSlider.skinFlat.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/plugins/clockpicker/clockpicker.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/animate.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/style.min.css?v=4.0.0" rel="stylesheet"><base target="_blank">
    <link href="${pageContext.request.contextPath}/resources/plugins/h+/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <style>
        .ml10 {
            margin-left: 15px;
        }

    </style>

</head>

<body class="gray-bg" >
<div class="wrapper wrapper-content  animated fadeInRight" id="ccbb">
    <div class="row">
        <div class="col-sm-12">
            <div class="toolbar">
                <div id="toolbar">
                    <%--    <button id="btn_add" class="btn btn-primary"><i class="fa fa-plus-circle"></i>&nbsp;新增</button>
                      <button id="btn_del" class="btn btn-w-s btn-danger"><i class="fa fa-times-circle"></i>&nbsp;批量删除</button>
                    <button id="button" class="btn btn-primary " ><i class="fa fa-check-circle"></i>&nbsp;获取选中</button>
                      <button id="btn_getCheck" class="btn btn-primary " ><i class="fa fa-check-square"></i>&nbsp;获取选中ChekBox</button>--%>
                </div>
            </div>
            <span id="spancc" class="spancc"></span>
            <div class="row">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>搜索条件</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content" >
                        <div class="row">
                           <div class="col-md-2">
                                <select data-placeholder="选择类型..."  class="chosen-select" id="search_type">
                                    <!--根据权限显示-->
                                    <shiro:hasRole name="admin">
                                        <option value="2">按代理商</option>
                                        <option value="3">按业务员</option>

                                     </shiro:hasRole>
                                    <shiro:hasRole name="代理商">
                                        <option value="1">按商户</option>
                                    </shiro:hasRole>
                            </select>
                            </div>

                            <div class="col-md-2">
                                <select data-placeholder="请选择..."  class="chosen-select" id="type_code">

                                </select>
                            </div>

                            <div class="col-md-2">
                                <select data-placeholder="选择数据类型..."  class="chosen-select" id="detail_type">
                                    <option value="1">发券数</option>
                                    <option value="2">发券费用</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <select data-placeholder="选择发券类型..."  class="chosen-select" id="search_source">
                                    <!--根据权限显示-->
                                        <option value="">全部发券类型</option>
                                        <option value="1">自动发券</option>
                                        <option value="2">手动发券</option>
                                        <option value="4">实体卡</option>

                                </select>
                            </div>


                        </div>
                        <div class="row">
                            <div style="text-align: center;" class="col-md-2">
                                <label style="margin-top: 10px;font-size: medium;">开始日期</label>
                            </div>
                            <div class="col-md-2">
                                <input placeholder="开始日期" id="search_startdate" class="form-control layer-date" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})">
                                <%--<select data-placeholder="选择时间段.."  class="chosen-select" id="date_type">
                                    <option value="30">30日内</option>
                                    <option value="15">15日内</option>
                                    <option value="7">7日内</option>
                                    <option value="1">昨日</option>
                                </select>--%>
                            </div>
                            <div style="text-align: center;" class="col-md-2">
                                <label style="margin-top: 10px;font-size: medium;">结束日期</label>
                            </div>
                            <div class="col-md-2">
                                <input placeholder="结束日期" id="search_enddate" class="form-control layer-date" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})">

                            </div>
                            <div class="col -md-1"><button id="btn_search" class="btn btn-primary"><i class="fa fa-search"></i>&nbsp;确定</button></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="flot-chart">
                                    <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <table id="exampleTablePagination"></table>
        </div>
    </div>
</div>




<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight" id="modelBaseDetail">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                </button>
                发券详情
            </div>
            <div class="modal-body" style="height:  250px;">
                <div class="ibox-content" style="height:  200px;" id="fqxq">


                </div>
            </div>

        </div>
    </div>
</div>



    <script src="${ctxStatic}/plugins/h+/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctxStatic}/plugins/h+/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/bootstrap-table.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/locale/bootstrap-table-zh-CN.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/extensions/export/bootstrap-table-export.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/extensions/editable/bootstrap-table-editable.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/content.min.js?v=1.0.0"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/chosen/chosen.jquery.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/layer/laydate/laydate.js"></script>
<script src="${pageContext.request.contextPath}/resources/plugins/h+/js/plugins/flot/jquery.flot.js"></script>
<script src="${pageContext.request.contextPath}/resources/plugins/h+/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/plugins/h+/js/plugins/flot/jquery.flot.spline.js"></script>
<script src="${pageContext.request.contextPath}/resources/plugins/h+/js/plugins/flot/jquery.flot.resize.js"></script>
<script src="${pageContext.request.contextPath}/resources/plugins/h+/js/plugins/flot/jquery.flot.pie.js"></script>
<script src="${pageContext.request.contextPath}/resources/plugins/h+/js/plugins/flot/jquery.flot.symbol.js"></script>
<script src="${pageContext.request.contextPath}/resources/plugins/h+/js/plugins/easypiechart/jquery.easypiechart.js"></script>

    <script>

    </script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
    <script type="text/javascript">
var nowDate='${nowDate}';
var startTime=nowDate+" 00:00:00";
var endTime=nowDate+" 23:59:59";

        $("#search_startdate").val(nowDate);
        $("#search_enddate").val(nowDate);
        //初始化表格对象
        var $table = $('#exampleTablePagination');
        $('#search_type').chosen({   no_results_text : "未找到此选项!",
            width:"100%"});
        $('#date_type').chosen({   no_results_text : "未找到此选项!",
            width:"100%"});
        $('#detail_type').chosen({   no_results_text : "未找到此选项!",
            width:"100%"});
$('#search_source').chosen({   no_results_text : "未找到此选项!",
    width:"100%"});


        loadTypeCode($('#search_type').val());
$table.bootstrapTable('refresh', queryParams);
var datax = {
    type: $("#search_type").val(),
    code: $("#type_code").val(),
    dataType: $("#detail_type").val(),
    start: $("#search_startdate").val(),
    end: $("#search_enddate").val(),
    source: $("#search_source").val()
};
loadChartTJ(datax);
        ////////////////////////////////////////////////////////////////////////////////////////以下是通过js方式初始化BootStrapTable/////////////////////////////////////////////

        $table.bootstrapTable({
            url: "${pageContext.request.contextPath}/baseDetail/showBaseDetailStatistics.ac",
            method: 'post',
            contentType: "application/x-www-form-urlencoded",//必须的
            dataType: "json",
            pageList:[10, 20, 50, 100],//会根据当前的数据量加载合适的pageList
            height: ($(window).height()-200) ,
            //cardView:true,//是否自适应手机
            pagination: true, //分页
            // queryParamsType: "limit",
            singleSelect: false,
            cache:false,
            sortName:"name",
            search: false, //显示搜索框
            showColumns:false,
            showRefresh:false,
            showToggle:false,
            showPaginationSwitch:false,
            smartDisplay:true,
            detailView:false,
            toolbar:"#toolbar",
            queryParams: queryParams,//参数
            searchOnEnterKey:true,
            detailFormatter:function(index, row, element){
                return row.customer;
            },
            sidePagination: "server", //服务端处理分页
            columns: [
                {
                    visible:false,
                    field:'id'
                },
                {
                    title: '日期',
                    field: 'createTime',
                    titleTooltip: '点击可以进行排序操作',
                    sortStable:true,
                    align: 'center'
                }, {
                    title: '商户名称',
                    field: 'brandName',
                    titleTooltip: '点击可以进行排序操作',
                    sortStable:true,
                    align: 'center'
                },/*{
                    title: '业务员',
                    field: 'userName',
                    titleTooltip: '点击可以进行排序操作',
                    sortStable:true,
                    align: 'center'
                },*/{
                    title: '发券笔数',
                    field: 'count',
                    titleTooltip: '点击可以进行排序操作',
                    sortStable:true,
                    align: 'center'
                }, {
                    title: '自动发券金额',
                    field: 'point90z',
                    titleTooltip: '点击可以进行排序操作',
                    sortStable:true,
                    align: 'center',
                    formatter:function(value,row,index){
                        return (value/100).toFixed(2);
                    }
                },{
                    title: '人工发券金额',
                    field: 'point90s',
                    titleTooltip: '点击可以进行排序操作',
                    sortStable:true,
                    align: 'center',
                    formatter:function(value,row,index){
                        return (value/100).toFixed(2);
                    }
                },
                {
                    title: '实体卡金额',
                    field: 'point90k',
                    titleTooltip: '点击可以进行排序操作',
                    sortStable:true,
                    align: 'center',
                    formatter:function(value,row,index){
                        return (value/100).toFixed(2);
                    }
                },{
                title: '发放用户量',
                field: 'pcount',
                titleTooltip: '点击可以进行排序操作',
                sortStable:true,
                align: 'center'
                }

            ]
        });

        /*
         搜索按钮
         */
        $("#btn_search").click(function(){
            var op=$("#search_startdate").val();
           var ed= $("#search_enddate").val();
            if(op==null||op==undefined||op=='')
            {alert("请选择开始日期！");
            return false;}
            if(ed==null||ed==undefined||ed=='')
            {alert("请选择结束日期！");
                return false;}
            $table.bootstrapTable('selectPage', 1);
            $table.bootstrapTable('refresh', queryParams);
            var datax = {
                type: $("#search_type").val(),
                code: $("#type_code").val(),
                dataType: $("#detail_type").val(),
                start: $("#search_startdate").val(),
                end: $("#search_enddate").val(),
                source: $("#search_source").val()
            };
            loadChartTJ(datax);
        });
        /*
         切换下拉框
         */
        $("#search_type").change(function(){
            loadTypeCode($('#search_type').val());
        });
        /*
         传递的参数
         */
        function queryParams(params) {
            var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,  //页面大小
                offset: params.offset, //页码
                pageindex:params.pageNumber,
                type: $("#search_type").val(),
                code: $("#type_code").val(),
                dataType: $("#detail_type").val(),
                start: $("#search_startdate").val(),
                end: $("#search_enddate").val(),
                source:$("#search_source").val()
            };
            return temp;
        }
        function loadTypeCode(type)//加载对应的select列表
        {
            $.ajax( {
                url:'${pageContext.request.contextPath}/baseDetail/getStatisticsListForSelect.ac',
                data:{type:type},
                type:'post',
                cache:false,
                dataType:'json',
                success:function(data) {
                    var html='<option value="">全部</option>';
                    for(var i=0;i<data.length;i++)
                    {

                        html+='<option value="'+data[i].code+'">'+data[i].name+'</option>';

                    }

                    $("#type_code").html(html);
                    $('#type_code').chosen({
                        no_results_text : "未找到此选项!",
                        width:"100%"
                    });
                    $("#type_code").trigger("chosen:updated");
                },
                error : function() {
                    alert("加载失败！");
                }
            });
        }
        function loadChartTJ(temp) {
            $.ajax( {
                url:'${pageContext.request.contextPath}/baseDetail/getStatisticsChart.ac',
                data:temp,
                type:'post',
                cache:false,
                dataType:'json',
                success:function(data) {
                    var data3 = [];
                    for(var i=0;i<data.list.length;i++)
                    {
                        var da=[];

                        da.push(data.list[i].date)//data.list[i].date;//gd(2012, 1, i);//
                        da.push(data.list[i].count);
                        data3.push(da);
                    }

                    $(".chart").easyPieChart({barColor: "#23c6c8", scaleLength: 5, lineWidth: 4, size: 80});
                    $(".chart2").easyPieChart({barColor: "#23c6c8", scaleLength: 5, lineWidth: 4, size: 80});
                    var dataset = [ {
                        label: data.dataSet,
                        data:data3,
                        yaxis: 1,
                        color: "#23c6c8",
                        lines: {lineWidth: 1, show: true, fill: true, fillColor: {colors: [{opacity: 0.2}, {opacity: 0.2}]}},
                        splines: {show: false, tension: 0.6, lineWidth: 1, fill: 0.1},
                    }];
                    var options = {
                        xaxis: {
                            mode: "time",
                            tickSize: [data.size, "day"],
                            tickLength: 0,
                            axisLabel: "Date",
                            axisLabelUseCanvas: true,
                            axisLabelFontSizePixels: 12,
                            axisLabelFontFamily: "Arial",
                            axisLabelPadding: 10,
                            color: "#838383"
                        },
                        yaxes: [{
                            position: "left",
                            max: data.maxcount,
                            color: "#838383",
                            axisLabelUseCanvas: true,
                            axisLabelFontSizePixels: 12,
                            axisLabelFontFamily: "Arial",
                            axisLabelPadding: 3
                        }, {
                            position: "right",
                            clolor: "#838383",
                            axisLabelUseCanvas: true,
                            axisLabelFontSizePixels: 12,
                            axisLabelFontFamily: " Arial",
                            axisLabelPadding: 67
                        }],
                        legend: {noColumns: 1, labelBoxBorderColor: "#000000", position: "nw"},
                        grid: {hoverable: false, borderWidth: 0, color: "#838383"}
                    };
                    $.plot($("#flot-dashboard-chart"), dataset, options);

                },
                error : function() {
                    alert("加载图表失败！");
                }
            });
        }

    </script>
</body>


</html>
